import { useImageStore } from '@/domain/correction/hooks/image';
import { computed, defineComponent, onMounted, onUnmounted, reactive, Ref, ref, toRaw } from 'vue';
import { Popup, Toast } from 'vant';
import BHeader from './bottomHeader';
import { usePrepareStore } from '@/domain/correction/hooks/prepare';
import { useHomeWorksStore } from '@/domain/correction/hooks/homeWork';
import { ESubmitType } from '@/domain/correction/types/jobs/homeWork';
import { useCurrectStdStore } from '@/domain/correction/hooks/currectStd';
export default defineComponent({
  name: 'prepare',
  setup() {
    const show = ref(true);
    const store = usePrepareStore();
    const img_store = useImageStore();
    const currectStore = useCurrectStdStore();
    const template = computed(() => {
      return store.state.prepare?.pre_work.test_templates.filter((n) => n.id === currectStore.state.currentSubject?.id);
    });
    const currentAudio = ref('');
    const currentImage = ref('');
    const loadImage = (urls: string) => {
      const im = img_store.state.activeImageManages?.im!;
      const chartletList = im.stage.find('.prepare');
      /**只允许贴一张 */
      if (chartletList.length > 0) {
        chartletList.forEach((s) => s.remove());
      }
      urls.split(',').forEach((url) => {
        img_store.state.activeImageManages?.im.loadImageData(url, 'prepare');
      });
    };

    const changeCurrentAudioHandel = (fn: (url: string) => void, url?: string) => {
      const stdinfo = currectStore.state.currentSubject;
      const plist = (
        currectStore.state.submitType === ESubmitType.frist ? currectStore.state.reqJobCorrectParam : currectStore.state.reqRevisalParam
      )?.correct_infos?.filter((v) => v.id === currectStore.state.currentSubject?.id);
      if (plist && plist.length > 0) {
        plist.forEach((p) => {
          const vlist = p.test_infos?.filter((val) => val.test_id == stdinfo?.test_id);
          if (vlist && vlist.length > 0) {
            if (typeof url !== 'undefined') {
              vlist[0].audio_url = url;
            }
            fn(vlist[0].audio_url);
          }
        });
      }
    };
    onMounted(() => {
      currentImage.value = currectStore.state.currentSubject ? store.getPrepareImgList(currectStore.state.currentSubject?.test_id) : '';
      changeCurrentAudioHandel((url) => {
        currentAudio.value = url;
      });
    });
    const sumbit = () => {
      changeCurrentAudioHandel(() => {}, currentAudio.value);
      show.value = false;
    };
    return () => (
      <Popup position="bottom" show={show.value} style={{ height: '50%' }}>
        <div class={'w-full h-r10 mt-5 overflow-y-auto'}>
          <div class={'text-r1.4 leading-r2 ml-2 mb-2'}>备课音频</div>
          <div class={' w-full min-h-r5 h-auto  text-gray-350'}>
            {template.value?.map((node) => {
              const nodes = node.tests.filter((v) => v.test_id === currectStore.state.currentSubject?.test_id);
              if (nodes && nodes.length > 0) {
                return (
                  <>
                    {nodes[0].audios?.map((v) => (
                      <>
                        <span
                          onClick={() => {
                            if (currentAudio.value === v.audio_url) {
                              currentAudio.value = '';
                            } else {
                              currentAudio.value = v.audio_url;
                            }
                          }}
                          title={v.audio_name}
                          class={`relative inline-block h-r3.5 w-r17 leading-r4  bg-gray-150 text-center rounded-lg text-gray-350 mx-2  pl-1 pr-1 overflow-hidden ${
                            currentAudio.value === v.audio_url ? ' bg-blue-150 text-blue-500' : ''
                          }`}
                        >
                          {v.audio_name.length > 20 ? v.audio_name.slice(0, 20) + '...' : v.audio_name}
                          {currentAudio.value === v.audio_url ? (
                            <i class={'iconfont icon-a-bianzu20 absolute -bottom-1 right-0 text-r1.5 text-blue-500'}></i>
                          ) : null}
                        </span>
                      </>
                    ))}
                  </>
                );
              } else {
                return null;
              }
            })}
          </div>
        </div>
        <div class={'w-full h-r10 mt-5  overflow-y-auto'}>
          <div class={'text-r1.4 leading-r2 ml-2 mb-2'}>备课图像</div>
          <div class={' w-full  min-h-r5 h-auto text-gray-350'}>
            {template.value?.map((node) => {
              const test_id = currectStore.state.currentSubject?.test_id;
              const nodes = node.tests.filter((v) => v.test_id === test_id);
              if (nodes && nodes.length > 0) {
                return (
                  <>
                    {nodes[0].images?.map((v) => (
                      <>
                        <span
                          onClick={() => {
                            const cImg = currentImage.value;
                            if (cImg.split(',').filter((s) => s === v.img_url).length === 0) {
                              if (cImg !== '') {
                                currentImage.value = currentImage.value + ',' + v.img_url;
                              } else {
                                currentImage.value = v.img_url;
                              }
                            } else {
                              currentImage.value = cImg
                                .split(',')
                                .filter((s) => s !== v.img_url)
                                .join(',');
                            }
                          }}
                          title={v.img_name}
                          class={`relative inline-block h-r3.5 w-r17 leading-r4  bg-gray-150 text-center rounded-lg text-gray-350 mx-2  pl-1 pr-1 overflow-hidden ${
                            currentImage.value.split(',').filter((s) => s === v.img_url).length > 0 ? ' bg-blue-150 text-blue-500' : ''
                          }`}
                        >
                          {v.img_name.length > 20 ? v.img_name.slice(0, 20) + '...' : v.img_name}
                          {currentImage.value.split(',').filter((s) => s === v.img_url).length > 0 ? (
                            <i class={'iconfont icon-a-bianzu20 absolute -bottom-1 right-0 text-r1.5 text-blue-500'}></i>
                          ) : null}
                        </span>
                      </>
                    ))}
                  </>
                );
              } else {
                return null;
              }
            })}
          </div>
        </div>

        <BHeader
          name={'备课'}
          ok={() => {
            const cImageUrls = currentImage.value;
            if (currectStore.state.currentSubject) {
              store.setPrepareImgList(currectStore.state.currentSubject.test_id, cImageUrls);
              loadImage(cImageUrls);
            }
            sumbit();
            show.value = false;
            img_store.state.activeImageManages?.im.flyback();
          }}
          cannel={() => {
            show.value = false;
            return true;
          }}
        ></BHeader>
      </Popup>
    );
  }
});
